@charset "UTF-8";
.test{
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0.6s;
    animation-fill-mode: both;
    animation-play-state: initial;
}

//悬挂脱落
@-webkit-keyframes hingeRight {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,60% {
        -webkit-transform: rotate3d(0,0,1,80deg);
        transform: rotate3d(0,0,1,80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,80% {
        -webkit-transform: rotate3d(0,0,1,60deg);
        transform: rotate3d(0,0,1,60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,700px,0);
        transform: translate3d(0,700px,0);
        opacity: 0
    }
}

@keyframes hingeRight {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,60% {
        -webkit-transform: rotate3d(0,0,1,80deg);
        transform: rotate3d(0,0,1,80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,80% {
        -webkit-transform: rotate3d(0,0,1,60deg);
        transform: rotate3d(0,0,1,60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,700px,0);
        transform: translate3d(0,700px,0);
        opacity: 0
    }
}

.hingeRight {
    -webkit-animation-name: hingeRight;
    animation-name: hingeRight
}

@-webkit-keyframes hingeLeft {
    0% {
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,60% {
        -webkit-transform: rotate3d(0,0,1,-80deg);
        transform: rotate3d(0,0,1,-80deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,80% {
        -webkit-transform: rotate3d(0,0,1,-60deg);
        transform: rotate3d(0,0,1,-60deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,-700px,0);
        transform: translate3d(0,-700px,0);
        opacity: 0
    }
}

@keyframes hingeLeft {
    0% {
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,60% {
        -webkit-transform: rotate3d(0,0,1,-80deg);
        transform: rotate3d(0,0,1,-80deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,80% {
        -webkit-transform: rotate3d(0,0,1,-60deg);
        transform: rotate3d(0,0,1,-60deg);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0,700px,0);
        transform: translate3d(0,700px,0);
        opacity: 0
    }
}

.hingeLeft {
    -webkit-animation-name: hingeLeft;
    animation-name: hingeLeft
}

//旋转飞入
.twisterInUpRight {
    -webkit-animation-name: twisterInUpRight;
    animation-name: twisterInUpRight
}

@-webkit-keyframes twisterInUpRight {
    0% {
        opacity: 0;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1,1) translateX(-100%) rotate(-360deg)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1,1) translateX(0) rotate(0)
    }
}

@keyframes twisterInUpRight {
    0% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1,1) translateX(-100%) rotate(-360deg)
    }

    100% {
        opacity: 1;
        transform-origin: center center;
        transform: scale(1,1) translateX(0) rotate(0)
    }
}

.twisterInUpLeft {
    -webkit-animation-name: twisterInUpLeft;
    animation-name: twisterInUpLeft
}

@-webkit-keyframes twisterInUpLeft {
    0% {
        opacity: 0;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1,1) translateX(100%) rotate(360deg)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1,1) translateX(0) rotate(0)
    }
}

@keyframes twisterInUpLeft {
    0% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1,1) translateX(100%) rotate(360deg)
    }

    100% {
        opacity: 1;
        transform-origin: center center;
        transform: scale(1,1) translateX(0) rotate(0)
    }
}

.twisterInUpDown {
    -webkit-animation-name: twisterInUpDown;
    animation-name: twisterInUpDown
}

@-webkit-keyframes twisterInUpDown {
    0% {
        opacity: 0;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1,1) translateY(-100%) rotate(-360deg)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1,1) translateY(0) rotate(0)
    }
}

@keyframes twisterInUpDown {
    0% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1,1) translateY(-100%) rotate(-360deg)
    }

    100% {
        opacity: 1;
        transform-origin: center center;
        transform: scale(1,1) translateY(0) rotate(0)
    }
}

.twisterInUpUp {
    -webkit-animation-name: twisterInUpUp;
    animation-name: twisterInUpUp
}

@-webkit-keyframes twisterInUpUp {
    0% {
        opacity: 0;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1,1) translateY(100%) rotate(360deg)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: center center;
        -webkit-transform: scale(1,1) translateY(0) rotate(0)
    }
}

@keyframes twisterInUpUp {
    0% {
        opacity: 0;
        transform-origin: center center;
        transform: scale(1,1) translateY(100%) rotate(360deg)
    }

    100% {
        opacity: 1;
        transform-origin: center center;
        transform: scale(1,1) translateY(0) rotate(0)
    }
}

.slideUp {
    -webkit-animation-name: slideUp;
    animation-name: slideUp
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(0)
    }

    100% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(-100%)
    }
}

@keyframes slideUp {
    0% {
        transform-origin: 0 0;
        transform: translateY(0)
    }

    100% {
        transform-origin: 0 0;
        transform: translateY(-100%)
    }
}

.slideDown {
    -webkit-animation-name: slideDown;
    animation-name: slideDown
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(0)
    }

    100% {
        -webkit-transform-origin: 0 0;
        -webkit-transform: translateY(100%)
    }
}

@keyframes slideDown {
    0% {
        transform-origin: 0 0;
        transform: translateY(0)
    }

    100% {
        transform-origin: 0 0;
        transform: translateY(100%)
    }
}

@-webkit-keyframes puffOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1,1);
        -webkit-filter: blur(0)
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(2,2);
        -webkit-filter: blur(2px)
    }
}

@keyframes puffOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        -webkit-filter: blur(0)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        -webkit-filter: blur(2px)
    }
}
//缩小进入
.puffOut {
    -webkit-animation-name: puffOut;
    animation-name: puffOut
}

@-webkit-keyframes puffIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(2,2)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1,1)
    }
}

@keyframes puffIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2)
    }

    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1)
    }
}

.puffIn {
    -webkit-animation-name: puffIn;
    animation-name: puffIn
}

@-webkit-keyframes twisterInDownRight {
    0% {
        opacity: 0;
        -webkit-transform-origin: left top;
        -webkit-transform: scale(1,1) translateX(-100%) rotate(360deg)
    }

    30% {
        -webkit-transform-origin: left top;
        -webkit-transform: scale(0,0) translateX(-100%) rotate(360deg)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: left top;
        -webkit-transform: scale(1,1) translateX(0) rotate(0)
    }
}

@keyframes twisterInDownRight {
    0% {
        opacity: 0;
        transform-origin: left top;
        transform: scale(0,0) translateX(-100%) rotate(360deg)
    }

    30% {
        transform-origin: left top;
        transform: scale(0,0) translateX(-100%) rotate(360deg)
    }

    100% {
        opacity: 1;
        transform-origin: left top;
        transform: scale(1,1) translateX(0) rotate(0)
    }
}

.twisterInDownRight {
    -webkit-animation-name: twisterInDownRight;
    animation-name: twisterInDownRight
}

@-webkit-keyframes twisterInDownLeft {
    0% {
        opacity: 0;
        -webkit-transform-origin: right bottom;
        -webkit-transform: scale(0,0) translateX(100%) rotate(-360deg)
    }

    30% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: scale(0,0) translateX(100%) rotate(-360deg)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: right bottom;
        -webkit-transform: scale(1,1) translateX(0) rotate(0)
    }
}

@keyframes twisterInDownLeft {
    0% {
        opacity: 0;
        transform-origin: right bottom;
        transform: scale(0,0) translateX(100%) rotate(-360deg)
    }

    30% {
        transform-origin: right bottom;
        transform: scale(0,0) translateX(100%) rotate(-360deg)
    }

    100% {
        opacity: 1;
        transform-origin: right bottom;
        transform: scale(1,1) translateX(0) rotate(0)
    }
}

.twisterInDownLeft {
    -webkit-animation-name: twisterInDownLeft;
    animation-name: twisterInDownLeft
}

@-webkit-keyframes twisterInDownDown {
    0% {
        opacity: 0;
        -webkit-transform-origin: right top;
        -webkit-transform: scale(0,0) translateY(-100%) rotate(360deg)
    }

    30% {
        -webkit-transform-origin: right top;
        -webkit-transform: scale(0,0) translateY(-100%) rotate(360deg)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: right top;
        -webkit-transform: scale(1,1) translateY(0) rotate(0)
    }
}

@keyframes twisterInDownDown {
    0% {
        opacity: 0;
        transform-origin: right top;
        transform: scale(0,0) translateY(-100%) rotate(360deg)
    }

    30% {
        transform-origin: right top;
        transform: scale(0,0) translateY(-100%) rotate(360deg)
    }

    100% {
        opacity: 1;
        transform-origin: right top;
        transform: scale(1,1) translateY(0) rotate(0)
    }
}

.twisterInDownDown {
    -webkit-animation-name: twisterInDownDown;
    animation-name: twisterInDownDown
}

@-webkit-keyframes twisterInDownUp {
    0% {
        opacity: 0;
        -webkit-transform-origin: left bottom;
        -webkit-transform: scale(0,0) translateY(100%) rotate(-360deg)
    }

    30% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: scale(0,0) translateY(100%) rotate(-360deg)
    }

    100% {
        opacity: 1;
        -webkit-transform-origin: left bottom;
        -webkit-transform: scale(1,1) translateY(0) rotate(0)
    }
}

@keyframes twisterInDownUp {
    0% {
        opacity: 0;
        transform-origin: left bottom;
        transform: scale(0,0) translateY(100%) rotate(-360deg)
    }

    30% {
        transform-origin: left bottom;
        transform: scale(0,0) translateY(100%) rotate(-360deg)
    }

    100% {
        opacity: 1;
        transform-origin: left bottom;
        transform: scale(1,1) translateY(0) rotate(0)
    }
}

.twisterInDownUp {
    -webkit-animation-name: twisterInDownUp;
    animation-name: twisterInDownUp
}

@-webkit-keyframes rollInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none
    }
}

@keyframes rollInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollInRight {
    -webkit-animation-name: rollInRight;
    animation-name: rollInRight
}

@-webkit-keyframes rollInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
        transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
        transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollInLeft {
    -webkit-animation-name: rollInLeft;
    animation-name: rollInLeft
}

@-webkit-keyframes rollInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0) rotate3d(1,0,0,120deg);
        transform: translate3d(0,-100%,0) rotate3d(1,0,0,120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0) rotate3d(1,0,0,120deg);
        transform: translate3d(0,-100%,0) rotate3d(1,0,0,120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollInDown {
    -webkit-animation-name: rollInDown;
    animation-name: rollInDown
}

@-webkit-keyframes rollInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0) rotate3d(1,0,0,-120deg);
        transform: translate3d(0,100%,0) rotate3d(1,0,0,-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes rollInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0) rotate3d(1,0,0,-120deg);
        transform: translate3d(0,100%,0) rotate3d(1,0,0,-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rollInUp {
    -webkit-animation-name: rollInUp;
    animation-name: rollInUp
}

@-webkit-keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translate3d(-100%,0,0) skewX(-30deg);
        transform: translate3d(-100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translate3d(-100%,0,0) skewX(-30deg);
        transform: translate3d(-100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedInRight {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

.lightSpeedInDown,.lightSpeedInLeft {
    -webkit-animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(100%,0,0) skewX(-30deg);
        transform: translate3d(100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(100%,0,0) skewX(-30deg);
        transform: translate3d(100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedInLeft {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    animation-timing-function: ease-out
}

@keyframes lightSpeedInDown {
    0% {
        -webkit-transform: translate3d(0,-100%,0) skewX(-30deg);
        transform: translate3d(0,-100%,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes lightSpeedInDown {
    0% {
        -webkit-transform: translate3d(0,-100%,0) skewX(-30deg);
        transform: translate3d(0,-100%,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedInDown {
    -webkit-animation-name: lightSpeedInDown;
    animation-name: lightSpeedInDown;
    animation-timing-function: ease-out
}

@keyframes lightSpeedInUp {
    0% {
        -webkit-transform: translate3d(0,100%,0) skewX(-30deg);
        transform: translate3d(0,100%,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes lightSpeedInUp {
    0% {
        -webkit-transform: translate3d(0,100%,0) skewX(-30deg);
        transform: translate3d(0,100%,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.lightSpeedInUp {
    -webkit-animation-name: lightSpeedInUp;
    animation-name: lightSpeedInUp;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        -ms-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0,0,1,15deg);
        transform: rotate3d(0,0,1,15deg)
    }

    40% {
        -webkit-transform: rotate3d(0,0,1,-10deg);
        transform: rotate3d(0,0,1,-10deg)
    }

    60% {
        -webkit-transform: rotate3d(0,0,1,5deg);
        transform: rotate3d(0,0,1,5deg)
    }

    80% {
        -webkit-transform: rotate3d(0,0,1,-5deg);
        transform: rotate3d(0,0,1,-5deg)
    }

    100% {
        -webkit-transform: rotate3d(0,0,1,0deg);
        transform: rotate3d(0,0,1,0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0,0,1,15deg);
        transform: rotate3d(0,0,1,15deg)
    }

    40% {
        -webkit-transform: rotate3d(0,0,1,-10deg);
        transform: rotate3d(0,0,1,-10deg)
    }

    60% {
        -webkit-transform: rotate3d(0,0,1,5deg);
        transform: rotate3d(0,0,1,5deg)
    }

    80% {
        -webkit-transform: rotate3d(0,0,1,-5deg);
        transform: rotate3d(0,0,1,-5deg)
    }

    100% {
        -webkit-transform: rotate3d(0,0,1,0deg);
        transform: rotate3d(0,0,1,0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes wobble {
    0%,100% {
        -webkit-transform: none;
        transform: none
    }

    15% {
        -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
        transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
        -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
        transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
        transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
        -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
        transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
        transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
    }
}

@keyframes wobble {
    0%,100% {
        -webkit-transform: none;
        transform: none
    }

    15% {
        -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
        transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
        -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg);
        transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
        transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
        -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg);
        transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
        transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes rotateIn {
    from {
        -moz-transform: rotate(0)
    }

    to {
        -moz-transform: rotate(359deg)
    }
}

@-o-keyframes rotateIn {
    from {
        -o-transform: rotate(0)
    }

    to {
        -o-transform: rotate(359deg)
    }
}

@keyframes rotateIn {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

//翻转变大
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg);
        transform: perspective(400px) rotate3d(0,1,0,-360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
        transform: perspective(400px) scale3d(.95,.95,.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg);
        transform: perspective(400px) rotate3d(0,1,0,-360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
        transform: perspective(400px) scale3d(.95,.95,.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        -ms-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    100% {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    100% {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes bounceIn {
    0%,100%,20%,40%,60%,80% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

@keyframes bounceIn {
    0%,100%,20%,40%,60%,80% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    20% {
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03,1.03,1.03);
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        -webkit-transform: scale3d(.97,.97,.97);
        transform: scale3d(.97,.97,.97)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInLeft {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px,0,0);
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px,0,0);
        transform: translate3d(25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInLeft {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px,0,0);
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px,0,0);
        transform: translate3d(25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(5px,0,0);
        transform: translate3d(5px,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInRight {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0)
    }

    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }

    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0)
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,3000px,0);
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,-25px,0);
        transform: translate3d(0,-25px,0)
    }

    75% {
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInUp {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,3000px,0);
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,-25px,0);
        transform: translate3d(0,-25px,0)
    }

    75% {
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceInDown {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-3000px,0);
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,25px,0);
        transform: translate3d(0,25px,0)
    }

    75% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes bounceInDown {
    0%,100%,60%,75%,90% {
        -webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-3000px,0);
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0,25px,0);
        transform: translate3d(0,25px,0)
    }

    75% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    90% {
        -webkit-transform: translate3d(0,5px,0);
        transform: translate3d(0,5px,0)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    50%,55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9,.9,.9);
        transform: scale3d(.9,.9,.9)
    }

    50%,55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1,1.1,1.1);
        transform: scale3d(1.1,1.1,1.1)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    40%,45% {
        opacity: 1;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,2000px,0);
        transform: translate3d(0,2000px,0)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0)
    }

    40%,45% {
        opacity: 1;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,2000px,0);
        transform: translate3d(0,2000px,0)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px,0,0);
        transform: translate3d(20px,0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px,0,0);
        transform: translate3d(-2000px,0,0)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px,0,0);
        transform: translate3d(20px,0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px,0,0);
        transform: translate3d(-2000px,0,0)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px,0,0);
        transform: translate3d(-20px,0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px,0,0);
        transform: translate3d(2000px,0,0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px,0,0);
        transform: translate3d(-20px,0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(2000px,0,0);
        transform: translate3d(2000px,0,0)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    40%,45% {
        opacity: 1;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-2000px,0);
        transform: translate3d(0,-2000px,0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0)
    }

    40%,45% {
        opacity: 1;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-2000px,0);
        transform: translate3d(0,-2000px,0)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes rollOutRight {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
        transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }
}

@keyframes rollOutRight {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg);
        transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }
}

.rollOutRight {
    -webkit-animation-name: rollOutRight;
    animation-name: rollOutRight
}

@-webkit-keyframes rollOutLeft {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }
}

@keyframes rollOutLeft {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }
}

.rollOutLeft {
    -webkit-animation-name: rollOutLeft;
    animation-name: rollOutLeft
}

@-webkit-keyframes rollOutDown {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg);
        transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg)
    }
}

@keyframes rollOutDown {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg);
        transform: translate3d(0,100%,0) rotate3d(0,0,1,120deg)
    }
}

.rollOutDown {
    -webkit-animation-name: rollOutDown;
    animation-name: rollOutDown
}

@-webkit-keyframes rollOutUp {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg)
    }
}

@keyframes rollOutUp {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg);
        transform: translate3d(0,-100%,0) rotate3d(0,0,1,-120deg)
    }
}

.rollOutUp {
    -webkit-animation-name: rollOutUp;
    animation-name: rollOutUp
}

//橡皮筋

@-webkit-keyframes rubberBand {
    0%,100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1)
    }

    40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1)
    }

    50% {
        -webkit-transform: scale3d(1.15,.85,1);
        transform: scale3d(1.15,.85,1)
    }

    65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1)
    }

    75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1)
    }
}

@keyframes rubberBand {
    0%,100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1)
    }

    40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1)
    }

    50% {
        -webkit-transform: scale3d(1.15,.85,1);
        transform: scale3d(1.15,.85,1)
    }

    65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1)
    }

    75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1)
    }
}

@-webkit-keyframes lightSpeedOutRight {
    0% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(100%,0,0) skewX(30deg);
        transform: translate3d(100%,0,0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutRight {
    0% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(100%,0,0) skewX(30deg);
        transform: translate3d(100%,0,0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOutRight {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

.lightSpeedOutDown,.lightSpeedOutLeft {
    -webkit-animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutLeft {
    0% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(-100%,0,0) skewX(30deg);
        transform: translate3d(-100%,0,0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutLeft {
    0% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(-100%,0,0) skewX(30deg);
        transform: translate3d(-100%,0,0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOutLeft {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutDown {
    0% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(0,100%,0) skewY(30deg);
        transform: translate3d(0,100%,0) skewY(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutDown {
    0% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(0,100%,0) skewY(30deg);
        transform: translate3d(0,100%,0) skewY(30deg);
        opacity: 0
    }
}

.lightSpeedOutDown {
    -webkit-animation-name: lightSpeedOutDown;
    animation-name: lightSpeedOutDown;
    animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutUp {
    0% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(0,-100%,0) skewY(30deg);
        transform: translate3d(0,-100%,0) skewY(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutUp {
    0% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate3d(0,-100%,0) skewY(30deg);
        transform: translate3d(0,-100%,0) skewY(30deg);
        opacity: 0
    }
}

.lightSpeedOutUp {
    -webkit-animation-name: lightSpeedOutUp;
    animation-name: lightSpeedOutUp;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes heartbeat {
    0%,100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
}

@keyframes heartbeat {
    0%,100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
}

.heartbeat {
    -webkit-animation-name: heartbeat;
    animation-name: heartbeat
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg);
        transform: perspective(400px) rotate3d(0,1,0,-15deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg);
        transform: perspective(400px) rotate3d(0,1,0,-15deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

.flipInX,.flipInY {
    -webkit-backface-visibility: visible!important
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
        transform: perspective(400px) rotate3d(0,1,0,-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
        transform: perspective(400px) rotate3d(0,1,0,10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
        transform: perspective(400px) rotate3d(0,1,0,-5deg)
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg);
        transform: perspective(400px) rotate3d(0,1,0,90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg);
        transform: perspective(400px) rotate3d(0,1,0,-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg);
        transform: perspective(400px) rotate3d(0,1,0,10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg);
        transform: perspective(400px) rotate3d(0,1,0,-5deg)
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    backface-visibility: visible!important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
        transform: perspective(400px) rotate3d(1,0,0,10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
        transform: perspective(400px) rotate3d(1,0,0,-5deg)
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg);
        transform: perspective(400px) rotate3d(1,0,0,10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg);
        transform: perspective(400px) rotate3d(1,0,0,-5deg)
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    backface-visibility: visible!important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg);
        transform: perspective(400px) rotate3d(1,0,0,-20deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg);
        transform: perspective(400px) rotate3d(1,0,0,90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important
}

@-webkit-keyframes tada {
    0%,100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
        transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }
}

@keyframes tada {
    0%,100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
        transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes jello {
    11.1% {
        -webkit-transform: none;
        transform: none
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.39062deg) skewY(.39062deg);
        transform: skewX(.39062deg) skewY(.39062deg)
    }

    88.8% {
        -webkit-transform: skewX(-.19531deg) skewY(-.19531deg);
        transform: skewX(-.19531deg) skewY(-.19531deg)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes jello {
    11.1% {
        -webkit-transform: none;
        transform: none
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.39062deg) skewY(.39062deg);
        transform: skewX(.39062deg) skewY(.39062deg)
    }

    88.8% {
        -webkit-transform: skewX(-.19531deg) skewY(-.19531deg);
        transform: skewX(-.19531deg) skewY(-.19531deg)
    }

    100% {
        -webkit-transform: none;
        transform: none
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes flash {
    0%,100%,50% {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

@keyframes flash {
    0%,100%,50% {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}
//闪烁
.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0%,100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }
}

@keyframes pulse {
    0%,100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes scaleUp {
    0% {
        -webkit-transform: scale(1)
    }

    100% {
        -webkit-transform: scale(1.5)
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.5)
    }
}

@-webkit-keyframes scaleDown {
    0% {
        -webkit-transform: scale(1.5)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1.5)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes blur {
    0% {
        -webkit-filter: blur(0)
    }

    100% {
        -webkit-filter: blur(8px)
    }
}

@keyframes blur {
    0% {
        -webkit-filter: blur(0)
    }

    100% {
        -webkit-filter: blur(8px)
    }
}

@-webkit-keyframes sharp {
    0% {
        -webkit-filter: blur(8px)
    }

    100% {
        -webkit-filter: blur(0)
    }
}

@keyframes sharp {
    0% {
        -webkit-filter: blur(8px)
    }

    100% {
        -webkit-filter: blur(0)
    }
}

@-webkit-keyframes particles {
    0% {
        -webkit-filter: blur(2px)
    }

    100% {
        -webkit-filter: blur(0)
    }
}

@keyframes particles {
    0% {
        -webkit-filter: blur(2px)
    }

    100% {
        -webkit-filter: blur(0)
    }
}



@-webkit-keyframes start {
    0%,30% {
        opacity: 0;
        -webkit-transform: translate(0,10px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate(0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0,-8px)
    }
}

@-moz-keyframes start {
    0%,30% {
        opacity: 0;
        -moz-transform: translate(0,10px)
    }

    60% {
        opacity: 1;
        -moz-transform: translate(0,0)
    }

    100% {
        opacity: 0;
        -moz-transform: translate(0,-8px)
    }
}

@keyframes start {
    0%,30% {
        opacity: 0;
        transform: translate(0,10px)
    }

    60% {
        opacity: 1;
        transform: translate(0,0)
    }

    100% {
        opacity: 0;
        transform: translate(0,-8px)
    }
}



@-webkit-keyframes rightflip {
    0%,30% {
        opacity: 0;
        -webkit-transform: translate(10,0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate(0,0)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(-8px,0)
    }
}

@-moz-keyframes rightflip {
    0%,30% {
        opacity: 0;
        -moz-transform: translate(10,0)
    }

    60% {
        opacity: 1;
        -moz-transform: translate(0,0)
    }

    100% {
        opacity: 0;
        -moz-transform: translate(-8px,0)
    }
}

@keyframes rightflip {
    0%,30% {
        opacity: 0;
        transform: translate(10,0)
    }

    60% {
        opacity: 1;
        transform: translate(0,0)
    }

    100% {
        opacity: 0;
        transform: translate(-8px,0)
    }
}



.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes rotating {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@-moz-keyframes rotating {
    from {
        -moz-transform: rotate(0)
    }

    to {
        -moz-transform: rotate(360deg)
    }
}


@keyframes gradientFadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0) scaleX(2)
    }

    100% {
        opacity: .1;
        transform: translateX(190%) scaleX(2)
    }
}

@-webkit-keyframes gradientFadeOutLeft {
    0% {
        -webkit-transform: translateX(0) scaleX(2)
    }

    100% {
        opacity: .1;
        -webkit-transform: translateX(190%) scaleX(2)
    }
}

@keyframes gradientFadeOutRight {
    0% {
        transform: translateX(0) scaleX(2)
    }

    100% {
        opacity: .1;
        transform: translateX(-190%) scaleX(2)
    }
}

@-webkit-keyframes gradientFadeOutRight {
    0% {
        -webkit-transform: translateX(0) scaleX(2)
    }

    100% {
        opacity: .1;
        -webkit-transform: translateX(-190%) scaleX(2)
    }
}

@keyframes gradientFadeOutBottom {
    0% {
        transform: translateY(0) scaleY(2)
    }

    100% {
        opacity: .1;
        transform: translateY(-190%) scaleY(2)
    }
}

@-webkit-keyframes gradientFadeOutBottom {
    0% {
        -webkit-transform: translateY(0) scaleY(2)
    }

    100% {
        opacity: .1;
        -webkit-transform: translateY(-190%) scaleY(2)
    }
}

@keyframes gradientFadeOutTop {
    0% {
        transform: translateY(0) scaleY(2)
    }

    100% {
        opacity: .1;
        transform: translateY(190%) scaleY(2)
    }
}

@-webkit-keyframes gradientFadeOutTop {
    0% {
        -webkit-transform: translateY(0) scaleY(2)
    }

    100% {
        opacity: .1;
        -webkit-transform: translateY(190%) scaleY(2)
    }
}

@keyframes gradientScale {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(.6)
    }
}

@-webkit-keyframes gradientScale {
    0%,100% {
        -webkit-transform: scale(1)
    }

    50% {
        -webkit-transform: scale(.6)
    }
}



@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.z-fade-in {
    -webkit-animation: fadeIn 2.5s backwards;
    animation: fadeIn 2.5s backwards
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.z-fade-out {
    -webkit-animation: fadeOut 2.5s backwards;
    animation: fadeOut 2.5s backwards
}

.scale-end {
    opacity: 1!important
}



@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}


@-webkit-keyframes shake {
    0%,100% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }
}

@keyframes shake {
    0%,100% {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
